<template>
  <view class="box">
    <view class="header">
      <text class="header-title-left">我的订单</text>
      <view class="header-title-right" @click="nav.jump('/pages/order/index?status=-1')">
        <text class="mr-2">查看全部订单</text>
        <u-icon color="#c2c2c2" name="arrow-right" font-size="26"></u-icon>
      </view>
    </view>
    <view class="main">
      <view class="menu-item" v-for="(item, index) in menu" :key="index" @click="nav.jump(item.link)">
        <image class="w-60rpx h-60rpx" mode="aspectFit" :src="item.icon" />
        <text class="menu-text">{{ item.label }}</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import type { MenuData } from '@/types/menu';
  import { nav } from '@/utils/homer';

  const menuCol = ref<number>(4);
  const menu = ref<MenuData[]>([
    { label: '待付款', icon: '/static/icon/img/order/unpay.png', link: '/pages/order/index?status=10' },
    // { label: '待审核', icon: '#mc-icon-liuchengshenpi', link: '/pages/order/index?status=20' },
    { label: '待发货', icon: '/static/icon/img/order/unsent.png', link: '/pages/order/index?status=30' },
    { label: '待收货', icon: '/static/icon/img/order/unreceive.png', link: '/pages/order/index?status=40' },
    // { label: '全部订单', icon: '/static/icon/img/order/all.png', link: '/pages/order/index?status=-1' },
    { label: '售后', icon: '/static/icon/img/order/refund.png', link: '/pages/order/index?status=72' },
  ]);
</script>

<style lang="scss" scoped>
  .box {
    background: white;
    margin: 10rpx 25rpx;
    padding: 30rpx;
    border-radius: 20rpx;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #ebebeb;
      padding-bottom: 20rpx;

      .header-title-left {
        font-weight: 600;
        font-size: 28rpx;
      }
      .header-title-right {
        display: flex;
        align-items: center;
        font-size: 22rpx;
        color: #c2c2c2;
      }
    }

    .main {
      display: grid;
      grid-template-columns: repeat(v-bind(menuCol), minmax(0, 1fr));
      column-gap: 35rpx;
      row-gap: 30rpx;
      margin-top: 30rpx;

      .menu-item {
        display: flex;
        flex-direction: column;
        align-items: center;

        .menu-text {
          margin-top: 10rpx;
          font-size: 25rpx;
        }
      }
    }
  }
</style>
